<template>
  <VDialog @close="handleClose" @save="save" :loading="loading">
    <template #content>
      <div>
        <el-form
          ref="formRef"
          :model="formValues"
          :rules="rules"
          label-width="105px"
          label-position="top"
        >
          <el-form-item label="类型" prop="channelType">
            <VSelects
              v-model="formValues.channelType"
              clearable
              :dataSourse="options.channel_type"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="渠道名称" prop="channelName">
            <el-input
              v-model.trim="formValues.channelName"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="渠道类型" prop="accountChannelType">
            <VSelects
              v-model="formValues.accountChannelType"
              clearable
              :dataSourse="options.account_channel_type"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="API渠道名称">
            <VSelects
              v-model="formValues.apiChannelType"
              clearable
              :dataSourse="options.account_api_channel_type"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input
              v-model.trim="formValues.remark"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="formValues.state"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-form>
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { addChannel, editChannel } from "../api.js";
const props = defineProps({
  data: { type: [String, Number], default: null },
  options: { type: Object, default: () => ({}) },
});
const rules = reactive({
  channelName: [{ required: true, message: "请输入渠道名称", trigger: "blur" }],
  accountChannelType: [
    { required: true, message: "请选择渠道类型", trigger: "blur" },
  ],
  channelType: [{ required: true, message: "请选择类型", trigger: "blur" }],
});
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formValues = ref({
  id: null,
  channelName: null,
  channelType: null,
  accountChannelType: null,
  apiChannelType: null,
  remark: null,
  state: 1,
});
const formRef = ref();

watch(
  () => props.data,
  (val) => {
    if (val) {
      for (let key in formValues.value) {
        formValues.value[key] = val[key];
      }
    }
  }
);

const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editChannel
          : addChannel)(formValues.value);
        if (code !== 200) return;
        ElMessage.success(message);
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};

const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    channelName: null,
    channelType: null,
    apiChannelType: null,
    remark: null,
    state: 1,
    accountChannelType: null,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
